<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>留言板</title>
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
	
	<style type="text/css">
		.labelTitle {
			font-size: 44px;
			color: #1E90FF;
		}
		.hr {
			background: #1E90FF;
			height: 3px;
		}
		.edit {
			width: 97%;
			height: 90px;
			font-size: 24px;
			color: #1E90FF;
			border-radius: 6px;
			border-color: #1E90FF;
			padding: 13px;
		}
		.editPeople {
			width: 70%;
			height: 40px;
			border-color: #1E90FF;
			border-radius: 6px;
			border-width: 1px;
			padding: 6px;
			font-size: 22px;
		}
		.buttonSend {
			width: 100px;
			height: 44px;
			border-radius: 10px;
			background: #1E90FF;
			color: #fff;
			font-size: 20px;
			margin-left: 30px;
		}
		.buttonClear {
			width: 100px;
			height: 44px;
			border-radius: 10px;
			background: red;
			color: #fff;
			font-size: 20px;
			margin-left: 30px;
		}
		.buttonRemove {
			width: 28px;
			height: 28px;
			border-radius: 50px;
			background: red;
			color: #fff;
			font-size: 17px;
		}
		.table {
			border-radius: 2px;
			border-color: #110000;
			width: 95%;
			word-break:break-all;
		}
		.table_caption {
			text-align: center;
			color: red;
			font-size: 24px;
		}
		.td {
			width: 95%;
			border: solid 1px #a0c6e5;
			height: 20px;
			padding: 10px;
		}
		.tr {
			text-align: center;
			border-color: red;
			border-radius: 3px;
		}
	</style>
	
	<div id="box" style="width: 100%">
		<form role="form">
			<div>
				<label class="labelTitle">留言板</label>
				<hr class="hr">
				<textarea class="edit" placeholder="发言信息" v-model="content"></textarea>
				<br>
				<input type="text" v-model="name" class="editPeople" placeholder="留言人">
				<input type="button" class="buttonClear" value="清空" v-on:click="clear()">
				<input type="button" class="buttonSend" value="发表" v-on:click="add()"> 
			</div>
		</form>
		<hr class="hr">

		<table class="table" align="center">
			<caption class="table_caption">留言日志</caption>
			<tr v-for="(item,index) in myData">
				<td class="td">
					<label style="font-size: 20px;color: #EEAD0E">{{ item.name }} {{ ':' }}</label>
					<br>
					<label style="font-size: 19px;margin-left: 30px;">{{ item.content}}</label>
					<label style="font-size: 19px;margin-left: 30px;"></label>
					<br>
					<br>

					<label style="font-size: 15px">{{ item.time }}</label>
					<input type="button" class="buttonRemove" value="X" v-on:click="remove(index)" style="float: right;margin-right: 20px;"> 
				</td>
			</tr>
			
			<tr class="tr" v-show="myData.length==0">
				<td class="td">
					<label>暂无数据.....</label>
				</td>
			</tr>

			<tr class="tr" v-show="myData.length!=0">
				<td>
					<button class="buttonClear" v-on:click="clearAll()" style="width: 90%;text-align: center;">清空全部</button>
				</td>
			</tr>
			
		</table>

		<p style="width: 100%;background: gray;color: #fff;font-size: 15px;text-align: center;margin-top: 200px">制作人:唐志杰</p>
	</div>

	<script type="text/javascript">
		new Vue({
			el: '#box',
			data: {
				myData:[],
				name:'',
				content:'',
				numIndex:'1'

			},
			methods:{
				add: function () {
					if (this.content==='' || this.name==='') {
						alert('留言内容或留言作者为空,请填写完整')
					} else {
						this.myData.push({
						name:this.name,
						time:this.nowTime(),
						content:this.content
						});
						this.content='',
						this.name=''
					}
				},
				clear: function () {
					if (this.content==='' || this.name==='') {
						alert('内容已清空,无需再次清空')
					} else {
						this.name='',
						this.content=''
					}
				},
				clearAll: function () {
					this.myData=[]
				},
				nowTime: function () {
                    var nowTime= new Date();
                    var year=nowTime.getFullYear();
                    var month=nowTime.getMonth() + 1;
                    var date=nowTime.getDate();
                    var hour = nowTime.getHours();
                    var minute = nowTime.getMinutes();
        			return year + '/' + month + '/' + date + ' ' + hour + ':' + minute;
				},
				remove: function (value) {
					this.myData.splice(value, 1)
				}
			}
		})
	</script>

</body>
</html>
